<template>
  <div class="footer">
    <mt-tabbar v-model="selectedIndex" fixed>
      <mt-tab-item  v-for="items in tabbarArr" :key="items.index" :id="items.index">
        <img :src="items.index == selectedIndex ? items.imgSrc_chooseImg : items.imgSrc_defaultImg" slot="icon">{{items.name}}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
import { testAxios } from '@api'

// 默认tabbar index
const DefaultIndex = 0;
export default {
  data() {
    return {
      selectedIndex: DefaultIndex, //默认选中顺序
      tabbarArr: [
        {
          name: "首页",
          index: DefaultIndex,
          imgSrc_defaultImg: "/static/icon/home_default.png",
          imgSrc_chooseImg: "/static/icon/home_choose.png"
        },
        {
          name: "新闻",
          index: 1,
          imgSrc_defaultImg: "/static/icon/news_default.png",
          imgSrc_chooseImg: "/static/icon/news_choose.png"
        },
        {
          name: "理财",
          index: 2,
          imgSrc_defaultImg: "/static/icon/investment_default.png",
          imgSrc_chooseImg: "/static/icon/investment_choose.png"
        },
        {
          name: "借款",
          index: 3,
          imgSrc_defaultImg: "/static/icon/borrow_default.png",
          imgSrc_chooseImg: "/static/icon/borrow_choose.png"
        },
        {
          name: "我的",
          index: 4,
          imgSrc_defaultImg: "/static/icon/my_defalult.png",
          imgSrc_chooseImg: "/static/icon/my_choose.png"
        }
      ]
    };
  },
  mounted () {
    console.log('hello vue');
    this.$router.push('/home')
    // 待nginx 测通
    // testAxios({param: 998}).then(data => {
    //   console.log(data)
    // }).catch((err) => {
    //   console.log(err,1);
    // })
  },
  computed: {
    otherSelect() {
      return this.$store.state.selectTab;
    }
  },
  watch: {
    otherSelect() {
      this.selectedIndex = this.otherSelect;
    },
    "selectedIndex": {
      handler() {
        if (this.selectedIndex == 0) {
          this.$router.push('/')
        } else if (this.selectedIndex == 1) {
          this.$router.push('/news')
        } else if (this.selectedIndex == 2) {
          this.$router.push('/investment')
        } else if (this.selectedIndex == 3) {
          this.$router.push('/borrow')
        } else if (this.selectedIndex == 4) {
          this.$router.push('/myself')
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .footer {
    font-size: 16px;
    .mint-tab-item.is-selected {
      color: #57a6b4;
    }
    .mint-tabbar {
      background-color: #fff;
    }
    .mint-tabbar > .mint-tab-item.is-selected {
      background-color: #fff;
      color: #57a6b4;
      text-decoration: none;
    }
  }
</style>
